<template>
  <a-modal
    title="切换小区"
    footer=""
    :xl="16"
    :lg="24"
    :md="24"
    :sm="24"
    :xs="24"
    :visible="visible"
  >
    <a-card
      class="project-list"
      style="margin-bottom: 24px;"
      :bordered="false"
      :body-style="{ padding: 0 }">
      <div>
        <a-card-grid class="project-card-grid" :key="i" v-for="(item, i) in projects" @click="changeMged(item.id)">
          <a-card :bordered="false">
            <a-card-meta>
              <div slot="title" class="card-title">
                <span class="cover" :class="item.classname">{{ item.cover }}</span>
                <a>{{ item.name }}</a>
              </div>
            </a-card-meta>
          </a-card>
        </a-card-grid>
      </div>
    </a-card>

  </a-modal>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      projects: [],
      visible: false,
    }
  },
  methods: {
    ...mapActions(['changeMg']),
    add (list) {
      this.visible = true
      for (let i = 0; i < list.length; i++) {
        list[i].cover = list[i].name.substr(0, 1)
        list[i].classname = this.randmun()
      }
      console.log(list)
      this.projects = list
    },
    handleSubmit () {
    },
    handleCancel () {
      this.visible = false
    },
    randmun () {
      const arr = ['colorbg1', 'colorbg2', 'colorbg3', 'colorbg4']
      const radnum = parseInt(3 * Math.random())
      return arr[radnum]
    },
    selecteds (item) {
      var allinfo = this.projects
      for (let i = 0; i < allinfo.length; i++) {
        allinfo[i].styleinfo = ''
      }
      allinfo[item].styleinfo = {
        borderColor: 'red',
        border: '1px'
      }
      console.log(this.projects)
    },
    changeMged (id) {
      this.changeMg(id)
      this.reload()
      this.visible = false
    },
    reload () {
      this.$router.go(0)
    }
  }
}
</script>
<style lang="less">
  .cover{
    height: 24px;
    width: 24px;
    color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-block;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
  }
  .colorbg1{
    background: #00b7ee;
  }
  .colorbg2{
    background: #dcee29;
  }
  .colorbg3{
    background: #eeab9e;
  }
  .colorbg4{
    background: #ee4c76;
  }
  .project-list {
    cursor: pointer;
    .ant-card-body{
      padding: 0!important;
    }
    .card-title {
      font-size: 0;

      a {
        color: rgba(0, 0, 0, 0.85);
        margin-left: 12px;
        line-height: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;

        &:hover {
          color: #1890ff;
        }
      }
    }
    .card-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
    }
    .project-item {
      display: flex;
      margin-top: 8px;
      overflow: hidden;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      a {
        color: rgba(0, 0, 0, 0.45);
        display: inline-block;
        flex: 1 1 0;

        &:hover {
          color: #1890ff;
        }
      }
      .datetime {
        color: rgba(0, 0, 0, 0.25);
        flex: 0 0 auto;
        float: right;
      }
    }
    .ant-card-meta-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
    }
  }
</style>
